<template>
  <div class="text_item" @click="toPath">

    <h4 class="title">{{ data.title }}</h4>

    <p class="cont">
      {{ data.desc }}
    </p>

    <div class="footer">
      <div class="item">
        <el-icon color="var(--infoColor)"><Clock /></el-icon>
        <span>{{ data.time }}</span>
      </div>

      <div class="item">
        <el-icon color="var(--infoColor)"><View /></el-icon>
        <span>{{ data.view }}</span>
      </div>

      <div class="item">
        <el-icon color="var(--infoColor)"><Share /></el-icon>
        <span>{{ data.share }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const router = useRouter();

const toPath = () => {
  router.push('/textDetail?id=' + props.data.id);
};
</script>

<style scoped>
.text_item {
  padding: 2rem;
  margin-bottom: 1.25rem; 
  color: var(--textColor);
  border-bottom: 0.0625rem solid var(--borderColor); 
  max-width: 100%; 
  overflow: hidden;
}

.title {
  margin-bottom: 0.625rem; 
  cursor: default;
  padding-bottom: 0.5rem; 
  position: relative;
}


.title::after {
  content: '';
  display: block;
  width: 5rem; 
  height: 0.125rem; 
  background: var(--textColor);
  position: absolute;
  left: 0;
  bottom: 0;
  transition: width 0.3s;
}

.title:hover::after {
  width: 100%;
}

.cont {
  line-height: 1.875rem; 
  max-height: 5.625rem; 
  font-size: 1rem; 
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--infoColor);
}

.footer {
  margin-top: 0.625rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.875rem; 
}

.item span {
  font-size: 0.875rem; 
  margin-left: 0.5rem; 
  color: var(--infoColor);
}

@media (max-width: 768px) {
  .text_item {
    padding: 1rem;
  }

  .title {
    margin-bottom: 0.5rem;
  }

  .title::after {
    width: 3.125rem; 
  }

  .cont {
    font-size: 0.9375rem; 
  }

  .footer {
    margin-top: 0.5rem;
    height: auto; 
  }

  .item {
    margin-right: 1rem; 
  }

  .item span {
    font-size: 0.75rem; 
  }
}
</style>